<template>
  <div id="show">
    <div class="title">
      <slot name="title"></slot>
      <div class="lineContainer">
        <div class="line" :class="{active:currentIndex ===0 ||currentIndex ===3}"></div>
        <div class="line" :class="{active: currentIndex ===1 || currentIndex ===4}"></div>
        <div class="line" :class="{active:currentIndex ===2}"></div>
      </div>
    </div>

    <div class="content">
      <swiper :options="swiperOption"
              ref="showSwiper"
              @slideChange="slideChange">
        <slot name="slide"></slot>
<!--        <div class="swiper-button-prev" slot="button-prev"></div>-->
<!--        <div class="swiper-button-next" slot="button-next"></div>-->
      </swiper>
    </div>
  </div>
</template>

<script>
  import CaseShowItem from "../../views/index/childCpn/CaseShowItem";
  export default {
    name: "Show",
    components:{
      CaseShowItem
    },
    computed: {
      swiper() {
        return this.$refs.showSwiper.swiper;
      }
    },
    data(){
      return {
        swiperOption:{
          //设置点击箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          //开启循环模式
          loop: true,
          speed:800
        },
        currentIndex:1
      }
    },
    methods:{
      slideChange(){
        this.currentIndex = this.$refs.showSwiper.swiper.activeIndex
        console.log(this.$refs.showSwiper.swiper.activeIndex);
        console.log('llll')
        console.log(this.$refs.showSwiper.swiper)
      }
    }

  }
</script>

<style scoped>
  #show{
    /*padding: 0 40px;*/
  }
  .title{
    width: 100px;
    font-size: 20px;
    margin: 10px auto;
  }
  .lineContainer{
    display: flex;
    width: 140px;
    margin-top: 10px;
  }
  .line{
    margin: 1px;
    height: 3px;
    background-color: #938f8f;
    justify-content: center;
    width: 100%;
  }
  .active{
    background-color: #1a5dd2;
  }
  .swiper-container{
    width: 90%;
  }
  .swiper-button-prev{
    margin-left: -10px;
  }
  .swiper-button-next{
    margin-right: -10px;
  }
</style>